<template>
    <div>
        <div class="container layout column-elem ">
            <div style="margin: 0 auto;">
                <div class="container layout column-elem ">
                    <div style="margin: 0 auto;">
                        <!-- 功能导航 -->
                        <div class="content" style="padding:0px">
                            <div class="path-description" style="margin:0px; box-shadow: 0 1px 3px 0 #979292;">
                                <div class="path-desc-top clearfix" style="height: 70px; line-height: 70px;">
                                    <div class="name-total-box clearfix">

                                        <div class="path-total-courses">
                                            <div class="nav-mine">
                                                <div class=" path-name">
                                                    <router-link to="/order/orderlist">
                                                        <div class="nav-mine-content">
                                                            <i> 全部</i>
                                                        </div>
                                                    </router-link>
                                                    <div class="nav-mine-content">
                                                        <i>待支付</i>
                                                    </div>
                                                    <div class="nav-mine-content">
                                                        <i>已支付</i>
                                                    </div>
                                                    <div class="nav-mine-content">
                                                        <i>超时已失效</i>
                                                    </div>
                                                    <div class="nav-mine-content">
                                                        <i>已取消</i>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 路由组件出口位置 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'OrderIndex',

}
</script>


<style>
.layout {
    margin-top: 20px;
    margin-bottom: 0px;
}

.path-description .path-desc-top .name-total-box {
    margin-top: 15px;
}

.container {
    padding-left: 0%;
    padding-right: 0%;
}

.navbar-brand {
    position: absolute;
    left: 50%;
    line-height: 50px;
    transform: translate(-50%);
}

button {
    background-color: #2e7ba7;
}

.layout {
    margin-top: 20px;
}

.form-group .btn {
    margin: 20px 0;
}

.column {
    position: relative;
}

.path-total-courses {
    font-size: 15px;
    line-height: 53px;
}

.col-md-8 {
    width: 100%;
}

.text-right {
    /* margin-left: 15px; */
    text-align: left;
}

.path-desc-btm .col-md-4 {
    padding-left: 0%;
}

.path-desc-btm .col-xs-12 {
    padding-left: 0%;
}

.nav-mine {
    background-color: white;
    margin: 0 3%;
}

.nav-mine .nav-mine-content {
    color: black;
    width: 20%;
    display: inline-block;

}

.nav-mine-content i {
    font-size: 14px;
    font-style: normal;
}

.nav-mine-content:hover {
    cursor: pointer;
    color: #2e7ba7;
}

.path-description .path-desc-top .name-total-box .path-total-courses {
    text-align: center;
}
</style>
